<div class="l-title-group">
    <dl>
        <dt>Filter Wizard</dt>
    </dl>
    <button class="l-popup-close" (click)="onClickClose()"><i class="fas fa-times"></i></button>
</div>
<div class="l-contents-group">
    <div class="l-table">
        <div class="first-row col1 row-col-1-1">Path</div>
        <div class="first-row row-col-1-2">
            <img [src]="getIconFullPath(link?.sourceInfo.serviceType)"/>
            <div class="ellipsis">{{link?.sourceInfo.applicationName}}</div>
        </div>
        <div class="first-row row-col-1-3">
            <span class="fas fa-arrow-right"></span>
            <img [src]="getIconFullPath(link?.targetInfo.serviceType)"/>
            <div class="ellipsis">{{link?.targetInfo.applicationName}}</div>
        </div>
        <div class="col1 row-col-2-1">Agent</div>
        <div class="row-col-2-2">
            <ul class="l-application-list">
                <li [class.active]="isSelectedFromAgent('All')" (click)="onSelectFromAgent('All')" title="all">ALL</li>
                <li *ngFor="let agent of link?.fromAgent" class="ellipsis" [class.active]="isSelectedFromAgent(agent)"
                    (click)="onSelectFromAgent(agent)" [title]="getFromAgentName(agent)">{{agent}}</li>
            </ul>
        </div>
        <div class="row-col-2-3">
            <ul class="l-application-list">
                <li [class.active]="isSelectedToAgent('All')" (click)="onSelectToAgent('All')" title="all">ALL</li>
                <li *ngFor="let agent of link?.toAgent" class="ellipsis" [class.active]="isSelectedToAgent(agent)"
                    (click)="onSelectToAgent(agent)" [title]="getToAgentName(agent)">{{agent}}</li>
            </ul>
        </div>
        <div class="row-col-3"></div>
        <div class="col1 row-col-4-1">URL Pattern</div>
        <div class="row-col-4-2">
            <div class="l-widget-group">
                <input placeholder="Request URL Pattern(/pinpoint/**/??.html)" type="text" [(ngModel)]="urlPattern">
            </div>
            <div class="l-widget-group">
                <table class="table l-pattern-guide" style="width: 100%">
                    <colgroup>
                        <col width="25%">
                        <col width="75%">
                    </colgroup>
                    <tbody>
                    <tr>
                        <td>*</td>
                        <td>Matchers zero or more characters</td>
                    </tr>
                    <tr>
                        <td>?</td>
                        <td>Matchers exactly one characters</td>
                    </tr>
                    <tr>
                        <td>**</td>
                        <td>Matchers zero or more directories</td>
                    </tr>
                    <tr>
                        <td>Example</td>
                        <td>
                            <div>/pinpoint/**/*.html</div>
                            <div>/pinpoint/??.html</div>
                            <div>/pinpoint/**/??.html</div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col1 row-col-5-1">Response Time</div>
        <div class="row-col-5-2 l-response-time">
            <nouislider
                    [connect]="true"
                    [min]="responseTimeMin"
                    [max]="responseTimeMax"
                    [step]="100"
                    [format]="getTimeFormatter()"
                    [tooltips]="[true, true]"
                    [(ngModel)]="responseTimeRange">
            </nouislider>
            <div class="l-range-info">
                <span>{{responseTimeMin.toLocaleString()}} ms</span>
                <span class="l-range-text">Range {{(responseTimeRange[1] - responseTimeRange[0]).toLocaleString()}}
                    ms</span>
                <span>{{responseTimeMax.toLocaleString()}}+ ms</span>
            </div>
        </div>
        <div class="col1 row-col-6-1">Transaction Result</div>
        <div class="row-col-6-2">
            <div class="l-transaction-result">
                <button *ngFor="let type of resultType; let i = index" [class.active]="isSelectedResultType(i)"
                        (click)="onSelectResultType(i)">{{type}}</button>
            </div>
        </div>
    </div>
</div>
<div class="l-buttons">
    <button class="btn active" (click)="onClickFilter()">Filter</button>
    <button class="btn l-cancel-button" (click)="onClickClose()">Cancel</button>
</div>
